<template>
  <page-header-wrapper :title="false">
    <a-card
      :loading="loading"
    >
      <a-card-meta>
        <div slot="title" :style="{ textAlign: 'center' }">
          <h2>{{ messageDetail.title }}</h2>
        </div>
        <div slot="description" :style="{ textAlign: 'center' }">
          消息类型：{{ msgTypeOpts[messageDetail.msg_type] }} 发布人：{{ messageDetail.create_uid }} 发布时间：{{ messageDetail.created_at }}
        </div>
      </a-card-meta>
      <div class="ql-editor" :style="{ padding: '0 50px', marginTop: '40px', fontSize: '16px' }" v-html="messageDetail.content">
      </div>
      <a-divider />
      <div :style="{ padding: '0 50px', marginTop: '10px' }">【下载附件】：<a-button v-if="messageDetail.file != ''" type="link" @click="download(messageDetail.file)">{{ messageDetail.filename }}</a-button></div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import { mapActions } from 'vuex'
  import { getMsgDetail, setRead } from '@/api/message'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  export default {
    name: 'MessageDetail',
    data () {
      return {
        loading: false,
        messageDetail: {},
        msgTypeOpts: {}
      }
    },
    created () {
      this.getDetail(this.$route.params.id)
    },
    methods: {
      ...mapActions(['GetMessage']),
      getDetail (id) {
        const { GetMessage } = this
        const app = this
        app.loading = true
        GetMessage().then(res => {
          setRead(id).then(res => {
            if (res.status === 0) {
              getMsgDetail(id).then(res => {
                app.msgTypeOpts = res.result.msg_opts
                app.messageDetail = res.result.msg
                app.loading = false
              })
            } else {
              app.$warning({
                title: res.msg
              })
              app.loading = false
            }
          })
        })
      },
      download (file) {
        window.open(file)
      }
    }
  }
</script>

<style scoped>

</style>
